<template>
  <div class="app-container">

    <el-card class="box-card menucent">
      <div slot="header" class="clearfix">
         胡娟
        <div class="addmenuBut"><el-button size="small" type="success" icon="el-icon-edit" @click="menusAdd">添加菜单</el-button></div>
         <TreeTable
         :data="tableData1"
         :columns="columns"
         @handleUpdate="handleUpdate"
         @removeUser="removeUser($event)"
         />
      </div>
    </el-card>
    <MenuAdd
    ref="menuAdd"
    v-if='dialogFormVisible'
    :dialogFormVisible.sync="dialogFormVisible"
    :typeStatus="typeStatus"
    :title="title"
    :types="types"
    @typeStatu="typeStatus = false"
    @handleCloseModal="handleCloseModal"
    @newDataes="newDataes"
    />
  </div>
</template>

<script>
import TreeTable from '@/components/TreeTable'
import MenuAdd from '../components/menu-add.vue'
import { list, remove } from '@/api/base/menus.js'

export default {
  name: 'menus',
  components: {
    TreeTable,
    MenuAdd
  },
  data () {
    return {
      types: '',
      disabled: '',
      title: '',
      // 弹窗显示
      dialogFormVisible: false,
      // 权限组名称是否禁用
      typeStatus: false,
      // 菜单表格数据
      tableData1: [],
      columns: [
        {
          text: '标题', // 列标题名称
          value: 'title', // 对应列内容的属性名
          render: (h, column) => {
            return h('div', [
              h('span', {
                class: column.row.icon,
                style: {
                  marginLeft: `${20 * column.row.layer}px`,
                  marginRight: '5px',
                  fontSize: '16px'
                }
              }),
              h('span', column.row.title)
            ])
          }

        },
        {
          text: '权限点代码',
          value: 'code' // 表示：把当前列定义为模板列
        }
      ]
    }
  },

  created () {
    this.loadMenusList()
  },
  methods: {
    newDataes () {
      this.loadMenusList()
      this.loadMenusList()
    },
    // 获取数据
    async loadMenusList () {
      const res = (await list()).data
      this.tableData1 = res
      this.getMents()
    },
    // 数据处理
    getMents () {
      this.layer = 0
      const newArray = []
      function makeNewItem (layer, oldItem) {
        let icon
        console.log(oldItem)
        if (layer === 0) {
          icon = ' fa fa-folder-open-o fa-fw'
        } else if (layer === 1) {
          icon = 'fa fa-file-o fa-fw'
        } else {
          icon = ' el-icon-view'
        }
        const newItem = {
          id: oldItem.id,
          pid: oldItem.pid,
          layer: layer,
          is_point: oldItem.is_point,
          code: oldItem.code,
          title: oldItem.title,
          icon: icon
        }
        return newItem
      }
      const makeLayer = function (layer, item) {
        layer++
        changeAray(layer, item)
        layer--
      }
      function changeAray (layer, oldArray) {
        for (let i = 0; i < oldArray.length; i++) {
          newArray.push(makeNewItem(layer, oldArray[i]))

          if (oldArray[i].childs && oldArray[i].childs.length > 0) {
            makeLayer(layer, oldArray[i].childs)
            console.log(layer, oldArray[i].childs)
          }
          if (oldArray[i].points && oldArray[i].points.length > 0) {
            makeLayer(layer, oldArray[i].points)
          }
        }
      }
      changeAray(this.layer, this.tableData1)
      this.tableData1 = newArray
    },

    // 添加菜单
    menusAdd () {
      this.dialogFormVisible = true
      this.typeStatus = false
      this.title = '创建菜单'
      this.$nextTick(() => {
        this.$refs.menuAdd.handleResetForm()
      })
    },
    // 编辑菜单
    handleUpdate (row) {
      this.dialogFormVisible = true
      this.typeStatus = true
      this.title = '编辑菜单'
      if (row.layer === 2) {
        this.types = 'update'
      }
      const flag = row.is_point ? 'points' : 'menu'
      console.log(row)
      this.$nextTick(() => {
        this.$refs.menuAdd.changeType(flag)
        this.$refs.menuAdd.hanldeEditForm(row.id)
      })

      console.log(row.layer)
    },
    handleCloseModal () {
      this.dialogFormVisible = false
      this.types = ''
    },
    async removeUser (id) {
      this.$confirm('此操作将永久删除该菜单，是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await remove(id)
          this.$message.success('删除成功')
          console.log()
          this.loadMenusList()
        } catch (error) {
          console.log(error)
        }
      })
    }
  }
}
</script>

<style scoped lang='less'>
.menucent{
  .addmenuBut{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
  }

}

</style>
